<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="gid" label="Gid"/>
    <el-table-column prop="name" label="品牌名称"/>
    <el-table-column prop="url" label="官网"/>
    <el-table-column prop="logo" label="Logo"/>
    <el-table-column prop="descs" label="描述"/>
    <el-table-column  align="right">
      <template  #header>
        <el-button size="small" type="primary" @click="addGoods">
          添加
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="品牌名称"/>
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!--模态框-->
  <el-dialog v-model="dialogFormVisible" title="编辑品牌" width="500">
    <el-form :model="form">

      <el-form-item label="Gid" v-if="form.gid" :label-width="formLabelWidth">
        <el-input v-model="form.gid" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="品牌名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="官网" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Logo" :label-width="formLabelWidth">
        <el-input v-model="form.logo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="form.descs" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref, toRef, toRefs} from "vue";
import {goodsFindAll, goodsSave} from "@/api/goods";
import {ElMessage} from "element-plus";
// 模态框展示
const dialogFormVisible = ref(false)
const tableData = ref()
function loadAll(){
  goodsFindAll().then(res=>{
    let {success,msg,data} = res
    if (success){
      tableData.value = data
    }else {
      ElMessage.error(msg)
    }
  }).catch(e=>{
    ElMessage.error(e)
  })
}
onMounted(() => {
  loadAll()
})
const handleEdit = (index,row) => {
  dialogFormVisible.value = true
  form.value =  row

}

const formLabelWidth = '140px'
const form = ref({
  gid: 0,
  name: '',
  url: '',
  logo: '',
  descs: '',
})
const form2 = ref({
  name: '',
  url: '',
  logo: '',
  descs: '',
})
const save = () => {
  goodsSave(form.value).then(res=>{
    let {success,msg,data} = res
    if (success){
      loadAll()
      ElMessage.success(msg)

    }else {
      ElMessage.error(msg)
    }
    dialogFormVisible.value = false
  }).catch(e=>{
    ElMessage.error(e)
    dialogFormVisible.value = false
  })
}
const addGoods = () => {
  form.value = form2.value
  dialogFormVisible.value = true
}
</script>

<style>

</style>
